<template>
  <view>
    <view class="home safe-box flex-box-page">
      <view class="search">
        <u-search placeholder="请输入关键字" v-model="keyword" :showAction="false" @search="search"></u-search>
      </view>
      <view class="flex-box-item">
        <List ref="list" refresherEnabled :status="status" @scrolltolower="scrolltolower" @refresherrefresh="refresherrefresh">
          <view class="banner">
            <Banner :list="bannerList" keyName="imageUrl" />
          </view>
          <Menu :list="categories"></Menu>
          <view class="goods-list">
            <view class="item" v-for="item in goodsList" :key="item._id">
              <GoodsItem :data="item"></GoodsItem>
            </view>
          </view>
        </List>
      </view>
    </view>
    <UpdatePopup></UpdatePopup>
  </view>
</template>

<script>
  import UpdatePopup from '@/components/UpdatePopup.vue'
  export default {
    name: 'Home',
    components: {
      UpdatePopup
    },
    data() {
      return {
        status: 'nomore',
        keyword: '',
        bannerList: [],
        categories: [],
        goodsList: [],
        query: {
          index: 1,
          size: 10
        }
      }
    },
    methods: {
      search() {
        this.$nav.to('/pages/goods-list/goods-list', {
          keyword: this.keyword
        })
      },
      scrolltolower() {
        if (this.status === 'loadmore') {
          this.status = 'loading'
          this.query.index++
          this.getList()
        } else {
          return
        }
      },
      getList() {
        this.$http.get('/fan/goods', this.query).then(res => {
          this.goodsList = [...this.goodsList, ...res.data.records]
          if (res.data.records.length < this.query.size) {
            this.status = 'nomore'
          } else {
            this.status = 'loadmore'
          }
        })
      },
      async getData() {
        const res = await this.$http.get('/home')
        console.log(res)
        this.bannerList = res.data.bannerList.map(item => ({...item, imageUrl: this.joinDomain(item.imageUrl)}))
        this.categories = res.data.cateList
        this.goodsList = res.data.goodsList
      },
      async refresherrefresh() {
        this.query.index = 1
        await this.getData()
        this.$refs.list.closeRefresh()
      }
    },
    // async onPullDownRefresh() {
    //   this.query.index = 1
    //   await this.getData()
    //   uni.stopPullDownRefresh()
    // },
    onLoad() {
      this.getData()
    }
  }
</script>

<style lang="scss" scoped>
  .home {}
  .content{
    flex: 1;
    overflow: hidden;
  }
  .banner {
    margin: 10rpx 0;
  }

  .goods-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: $me-marging-top-card;

    .item {
      width: 48%;
    }
  }
</style>
